<template>
    <div class="aboutBox">
        <div class="title">
            <el-icon size="30" style="margin-right: 20px;">
                <UserFilled />
            </el-icon>
            Personal Information Settings
        </div>
        <el-form label-position="top">
            <el-form-item label="username">
                <el-input :prefix-icon="User" style="max-width: 300px;" v-model="userInfoData.username"></el-input>
            </el-form-item>
            <el-form-item label="email">
                <el-input v-model="userInfoData.email" :prefix-icon="Box" style="max-width: 300px;">
                </el-input>
            </el-form-item>
            <el-form-item label="password">
                <el-input :prefix-icon="Lock" style="max-width: 300px;" type="password"
                show-password v-model="userInfoData.password"></el-input>
                <!-- <el-button type="primary" style="margin-left: 20px;">{{ yzmText }}</el-button> -->
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="edit">
                    modify
                </el-button>
            </el-form-item>
        </el-form>
    </div>


</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Plus, UserFilled, Lock, User, Box } from '@element-plus/icons-vue'
import { eidtProfileAPI, searchProfileAPI } from '@/apis/admin';
import { ElMessage } from 'element-plus';

const userInfoData = ref({
    id: 1,
    username: '',
    password: '',
    email: ''
})

const getProfile = async () => {
    const res = await searchProfileAPI()

    if (res.data.code === 200) {
        userInfoData.value = res.data.data
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

const edit = async () => {

    const res = await eidtProfileAPI(userInfoData.value)

    if (res.data.code === 200) {
        ElMessage.success('The modification was successful')
        getProfile()
    }
    else {
        ElMessage.error(res.data.msg)
    }
}


onMounted(() => {
    getProfile()
})


</script>

<style lang="scss" scoped>
.title {
    color: #409eff;
    font-size: 20px;
    line-height: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.demo-image__error .image-slot {
    font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
    font-size: 30px;
}

.demo-image__error .el-image {
    width: 100%;
    height: 200px;
}
</style>